<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css?time=20190123" />
		<link rel="stylesheet" href="../../../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../../../css/sale/order/order.css?time=20190822" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		#refreshContainer{
			z-index: 2;
    	top: 50px;
			margin-top: 10px;
		}
		#order .topSearch {
		    border-bottom: 1px solid #eee;
		}
	</style>
	<body>
		<div id="order" v-cloak class="mui-content">
			<!--<div class="noOrdertip" v-show="isTip">
				<span><i class="iconfont icon-iconfonticon3"></i></span>
				<span>温馨提示:为保证标本正常送检，请您及时汇款或确认订单，谢谢!</span>
				<span @tap="deltip"><i class="iconfont icon-shanchu"></i></span>
			</div>-->
			<div class="heightBox" v-show="isTip"></div>
			<!--搜素-->
			<div class="topSearch">
				<div class="selectRange">
					<div @tap="selectState">
						{{selState}}<i class="icon iconfont icon-jiantou"></i>
					</div>
				</div>
				<input type="text" v-model="doctorName" placeholder="请输入客户或医生或患者" />
				<button class="btn-primary right" @tap="searchItem">搜索</button>
			</div>
			<!--列表-->
			<div class="orderList" v-show="show">
				<!--首页今日订单进入-->
				<ul class="orderListItem" v-for="list in orderList">
					<div class="detail" @tap="reportDetail(list.orderId)">
						<li class="row1">
						<span class="name">{{list.patientName}}</span>
						<span class="date">{{list.submitTime|replaceT}}</span>
						<span class="right basic-color">
							<i class="icon iconfont icon-shijian-"></i>
							{{list.orderState+""|formatState}}
						</span>
					</li>
					<li class="row2">
						检验条形码：<span>{{list.specimenBarCode.join(',')}}</span>
					</li>
					<li class="row3">
						<span>{{list.projectNmae.join(',')}}</span>
					</li>
					<li class="row4">
						<span>共<span class="basic-color">{{list.projectNum}}</span>个检验项目<span class="basic-color">¥{{list.amount}}</span></span>
						<span class="right">
							<i class="icon iconfont icon-icon1 basic-color"></i>
							{{list.doctorName}}
						</span>
					</li>
					</div>
					<li class="row6" >
						<p v-if="list.orderState==4||list.orderState==8||list.orderState==11">
							<span @tap="reportPDF(list.orderId)" >
								<i class="icon iconfont icon-tubiaozhizuomoban10 basic-color"></i>JPEG报告
							</span>
						</p>
						<p>
							<span class="saler">业务员:{{list.saleName}}</span>
							<span class="creater" v-if="list.true==true">代录员:{{list.creatorName}}</span>
						</p>
					</li>
				</ul>
				<!--未确认订单列表-->
				<div id="refreshContainer" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view panel" v-show="orderTip>0&&unConfirmList.length>0">
								<li class="mui-table-view-cell mui-collapse">
										<a class="mui-navigate-right" href="#">
											<p>您有{{orderTip}}个订单待确认！</p>
											<p>(为保证标本正常送检,请您及时回款或确认订单)</p>
										</a>
										<div class="mui-collapse-content">
											<ul class="orderListItem" v-for="(unConfirm,index) in unConfirmList" >
												<li class="row1"  @tap="selectOne(unConfirm.orderId,index)">
													<i class="iconfont icon-tubiaozhizuomoban left" 
														:class="{'icon-xuanzhong':unConfirm.show}"></i>
													<span class="name">{{unConfirm.patientName}}</span>
													<span class="date">{{unConfirm.submitTime|replaceT}}</span>
													<span class="right basic-color">
														<i class="icon iconfont icon-shijian-"></i>
														{{unConfirm.orderState+""|formatState}}
													</span>
												</li>
												<div class="detail" @tap="reportDetail(unConfirm.orderId)">
													<li class="row2">
														检验条形码：<span>{{unConfirm.specimenBarCode.join(',')}}</span>
													</li>
													<li class="row3">
														<span>{{unConfirm.projectNmae.join(',')}}</span>
													</li>
													<li class="row4">
														<span>共<span class="basic-color">{{unConfirm.projectNum}}</span>个检验项目<span class="basic-color">¥{{unConfirm.amount}}</span></span>
														<span class="right">
															<i class="icon iconfont icon-icon1 basic-color"></i>
															{{unConfirm.doctorName}}
														</span>
													</li>
												</div>
												<!--<li class="row5" v-if='list.orderState==1'>
													<button class="btn-detail right cancelOrder"  @tap="confirmOrder(list.orderId)">确认订单</button>
													<span class="btn-detail right cancelOrder"  @tap="del(list.orderId)">取消订单</span>
												</li>-->
												<li class="row6" >
													<p>
														<span class="saler">业务员:{{unConfirm.saleName}}</span>
														<span class="creater" v-if="unConfirm.true==true">代录员:{{unConfirm.creatorName}}</span>
													</p>
													<p>
														<span @tap="del(unConfirm.orderId)"><i class="iconfont icon-icon2 right"></i></span>
													</p>
												</li>
											</ul>
										</div>
								</li>
								<p><button class="btn-detail cancelOrder" @tap="confirmOrder">确认订单</button></p>
						</ul>
						<ul class="orderListItem" v-for="list in confirmList" v-if='list.orderState!=1&&confirmList.length>0'>
							<div class="detail" @tap="reportDetail(list.orderId)">
								<li class="row1">
								<span class="name">{{list.patientName}}</span>
								<span class="date">{{list.submitTime|replaceT}}</span>
								<span class="right basic-color">
									<i class="icon iconfont icon-shijian-"></i>
									{{list.orderState+""|formatState}}
								</span>
							</li>
							<li class="row2">
								检验条形码：<span>{{list.specimenBarCode.join(',')}}</span>
							</li>
							<li class="row3">
								<span>{{list.projectNmae.join(',')}}</span>
							</li>
							<li class="row4">
								<span>共<span class="basic-color">{{list.projectNum}}</span>个检验项目<span class="basic-color">¥{{list.amount}}</span></span>
								<span class="right">
									<i class="icon iconfont icon-icon1 basic-color"></i>
									{{list.doctorName}}
								</span>
							</li>
							</div>
							<!--<li class="row5" v-if='list.orderState==1'>
								<button class="btn-detail right cancelOrder"  @tap="confirmOrder(list.orderId)">确认订单</button>
								<span class="btn-detail right cancelOrder"  @tap="del(list.orderId)">取消订单</span>
							</li>-->
							<li class="row6" >
								<p v-if="list.orderState==4||list.orderState==8||list.orderState==11||list.orderState==14||list.orderState==15||list.orderState==16">
									<span @tap="reportPDF(list.orderId)" >
										<i class="icon iconfont icon-tubiaozhizuomoban10 basic-color"></i>JPEG报告
									</span>
								</p>
								<p>
									<span class="saler">业务员:{{list.saleName}}</span>
									<span class="creater" v-if="list.true==true">代录员:{{list.creatorName}}</span>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--未找到数据-->
			<div class="notFind" v-show="!show">
				<img src="../../../img/notFind.png" alt="未找到对应的数据" />
				<p>暂无数据</p>
			</div>
		</div>
	
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/cmms.js?time=222"></script>
		<script type="text/javascript">
			new Vue({
				el:"#order",
				data:{
					loading:false,
					selState:'全部',
					selStateNum:'',
					doctorName:'',
					orderList:[],//订单列表
					orderTip:0,
					orderIds:[],//未确认订单id集合数
					show:false,
					urlArr:[],//报告地址
					confirm:0,//是否确认订单
					isTip:false,
					menuName:'',//判断哪个地方进入
					confirmList:[],
					unConfirmList:[],
					showConfirmList:[],
					userId:'',
					fromPage:'',//订单页有无确认订单
					id:'',
					pageCurrent:1,
					pageSize:10,
					count:100,
					refresh:true,
					pullDirection:''
				},
				created(){
					let self = this;
					mui.ready(function(){
						self.getUrl();
						self.init();
						mui.init({
							pullRefresh: {
								container: '#refreshContainer',
								//下拉刷新
								down: {
									auto:false,
									style:'circle',
									callback: self.pulldownRefresh
								},
								//上拉加载
								up: {
									height:50,
									auto:true,
									contentrefresh: '正在加载...',
									callback: self.pullupRefresh
								}
							}
						});
						// self.getPages();
					})
				},
				mounted(){
					let _this = this;
					console.log(_this.orderList)
					// _this.$nextTick(() => {});
					//var vConsole = new VConsole();
				},
				methods:{
					init(){
						let _this=this;
						/*调用微信接口配置location.href.split('#')[0]*/
						AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{url:location.href.split('#')[0],appId:'wx50a81908477971c2'},function(res){
							wx.config({
								//debug: true,
								appId:res.appId,
								timestamp:res.timestamp,
								nonceStr:res.nonceStr,
								signature:res.signature,
								jsApiList:['previewImage']
							});
						});
						//获取userID
						AT.muiAjax('/partner-sale/statistics/getHome','post',{},function(res){
							console.log(res);
							_this.userId = res.id;
						});
						console.log(_this.menuName)
						if(_this.menuName!="todayOrder"){
							console.log(111)
							//未确认订单数
							AT.muiAjax('/partner-sale/order/getCountUnConfirm','post',{},function(res){
								console.log(res);
								_this.orderTip = res;
								//未确认订单数存在，显示提示信息
								if(_this.orderList.length>0){
									if(res>0){
										_this.isTip = true;
									}else{
										_this.isTip = false;
									}
								}else{
									_this.isTip = false;
								}
							});
						}
						
					},
					getUrl(){
						let _this=this;
						var url = location.search; //获取url中"?"符后的字串    
						var theRequest = new Object();  
//						console.log(url);
					   	if (url.indexOf("?") != -1) {   
					      var str = url.substr(1);  
//					      console.log(str);
					      strs = str.split("&");  
					      for(var i = 0; i < strs.length; i ++) {   
					         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
					      } 
					   	}   
					   	console.log(theRequest);
					   	_this.menuName = theRequest.name;
					   	_this.fromPage = theRequest.fromPage;
					   	_this.id = theRequest.id;
					},
					//下拉刷新
					pulldownRefresh(){
						// this.refresh = true;
						let _this = this;
						_this.pullDirection = 'down';
						setTimeout(() => {
							_this.confirmList = [];
							_this.pageCurrent = 1;
							_this.getPages();
						   mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					   },1000)
					},
					//上拉加载
					pullupRefresh(){
						let _this = this;
						_this.pullDirection = 'up';
						setTimeout(function() {
							_this.getPages();
						});
					},
					getPages(){
						/*获取页面*/
						let _this=this;
						//加载页面数据
						if(_this.menuName=="todayOrder"){
							AT.muiAjax('/partner-sale/order/getDoctorOrderByToday','post',{
								name:_this.doctorName,
								orderState:_this.selStateNum
							},function(res){
								// _this.orderList = res;
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
								if(res.length>0){
									// _this.orderList.push(...res);
									_this.orderList = res;
									_this.show=true;
								}else{
									_this.show=false;
								}
							});
						}else if(_this.menuName=="clinicOrder"){
							AT.muiAjax('/partner-sale/order/getOrderByHospitalId','post',{
								id:_this.id,
								name:_this.doctorName,
								orderState:_this.selStateNum
							},function(res){
								
								if(_this.orderList.length>0){
									_this.orderList = res;
									_this.show=true;
								}else{
									_this.show=false;
								}
							});
						}
						else{
							console.log(_this.confirmList.length);
//							AT.muiAjax('/partner-sale/order/getDoctorOrder','post',{
//								name:_this.doctorName,
//								orderState:_this.selStateNum
//							},function(res){
							AT.muiAjax('/partner-sale/order/getDoctorOrderByPage','post',{
								name:_this.doctorName,
								orderState:_this.selStateNum,
								current:_this.pageCurrent,
								size:_this.pageSize
							},function(res){
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
								setTimeout(function(){  
								    mui('#refreshContainer').pullRefresh().disablePullupToRefresh();  
								    setTimeout(function(){  
								        mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
								    }, 500); // 等待1s执行：恢复下拉加载更多功能（可根据需要，不恢复）
								}, 1000);
								let unConfirmArrs = res.unConfirmList;
								let orderIds = [];
								for(let i=0;i<unConfirmArrs.length;i++){
									unConfirmArrs[i].show = true;
									orderIds.push(unConfirmArrs[i].orderId);
								}
								_this.orderIds = orderIds;								
								// console.log(_this.orderIds);
//								console.log(unConfirmArrs);
								_this.unConfirmList = unConfirmArrs;
								// _this.confirmList = res.confirmList;
								let confirmList = res.confirmList;
								console.log(confirmList);
								// console.log(_this.confirmList);
								if(_this.pullDirection =='up'){
									console.log(111)
								}else if(_this.pullDirection == 'down'){
									console.log(222)
								}
								if(confirmList.length>0){
									_this.pageCurrent++;
									_this.confirmList.push(...res.confirmList);
									console.log(confirmList);
								}else{
									// mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
								}
								if(_this.confirmList.length>0||_this.unConfirmList.length>0){
									_this.show=true;
								}else{
									_this.show=false;
								}
							});
						}
					},
					/*单选一项*/
					selectOne(id,index){
						let _this =this;
						let orderSizeSum=0;
						let orderIds = [];
						for(let order of _this.unConfirmList){
							if(order.orderId==id){
								if(order.show==true){
									order.show = false;
								}else{
									order.show = true;
								}
							}
							if(order.show){
								orderSizeSum++;
								orderIds.push(order.orderId);
								
							}
						}
						_this.orderIds = orderIds;
						console.log(_this.orderIds);
						
//						console.log(orderSizeSum);
//						console.log(_this.unConfirmList);
					},
					/*搜索*/
					searchItem(){
						this.pageCurrent = 1;
						this.confirmList = [];
						this.getPages();
					},
					/*获取PDF报告*/
					reportPDF(orderId){
						let _this=this;
						_this.urlArr = [];
						AT.muiAjax('/partner-sale/order/getOrderReportByOrderId','post',{
							id:orderId
						},function(res){
							if(res.length==0){
								mui.alert('报告未出');
							}else{
								let jpgList = res.jpgList;
								for(let i of jpgList){
									let url='https://api.lis.ulabcare.com/api/common/common/downLoadFile?type=0&fileName=1&attachId='+i;
									_this.urlArr.push(url);
								}
								console.log(_this.urlArr);
								_this.getImg();
							}
						});
					},
					/*调用微信接口展示图片*/
					getImg(){
						let _this=this;
						wx.previewImage({
							current: _this.urlArr[0], // 当前显示图片的http链接
							urls: _this.urlArr// 需要预览的图片http链接列表
						});
					},
					/*状态选择*/
					selectState:function(){
						let _this = this;
						var picker = new mui.PopPicker();
						picker.setData([
							{value:'',text:'全部'},
							{value:'1',text:'未支付'},
							{value:'5',text:'支付中'},
							{value:'13',text:'已支付'},
							{value:'9',text:'送检中'},
							{value:'10',text:'检验中'},
							{value:'11',text:'生成报告'},
							{value:'12',text:'已取消'}
						]);
						picker.show(function (selectItems) {
						    _this.selState=selectItems[0].text;
						    _this.selStateNum=selectItems[0].value;
							_this.pageCurrent = 1;
							_this.confirmList = [];
							_this.refresh = true;
						    _this.getPages();
						})
					},
					reportDetail(id){
						location.href = "./../orderDetail.html?id="+id+"&userId="+this.userId;
					},
					/*取消订单*/
					del(id){
						console.log(id)
						let _this = this;
						mui.confirm("确定要取消这条订单么？",'取消订单',['再考虑一下','取消订单'],function(con){
							if(con.index===1){
								AT.muiAjax('/partner-sale/order/delOrderStateById','post',{id},function(res){
									mui.toast(res)
									const timer = setTimeout(() =>{                    
										location.reload();              
									}, 1000);  
									_this.$once('hook:beforeDestroy', () => {            
									    clearTimeout(timer);                                    
									});
								})
							}
						})
					},
					//确认订单
					confirmOrder(){
						let _this = this;
						mui.confirm("确定这条订单么？",'确认订单',['再考虑一下','确认订单'],function(con){
							if(con.index===1){
								AT.muiAjax('/partner-sale/order/updOrderStateById','post',{
									orderIds:_this.orderIds
								},function(res){
//									console.log(res);
									mui.toast("确认订单成功!");
									const timer = setTimeout(() =>{                    
										location.reload();              
									}, 1000);  
									_this.$once('hook:beforeDestroy', () => {            
									    clearTimeout(timer);                                    
									});
								})
							}
						})
					},
					//关闭提示框
					deltip(){
						this.isTip = false;
					}
				}
			})
		</script>
	</body>

</html>